<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>DS_SaoDiSheng</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8" />
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/xadmin.css">
    <script src="lib/layui/layui.all.js" charset="utf-8"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/vue/2.5.16/vue.min.js"></script>
    <script src="js/axios/0.17.1/axios.min.js"></script>
    <script type="text/javascript" src="js/xadmin.js"></script>
</head>
<body>
<script>
    <!--前后端交互层-->
    $(function () {
        var data4Vue = {
            uri: 'packages',
            beans: [],
            bean: {'id':0, 'name':'','quantity':0, 'weight': 0},
            pagination: {}
        };

        // ViewModel
        var vue = new Vue({
            el: "#workingArea",      // 关联作用域
            data: data4Vue,
            mounted:function () {// mounted表示这个Vue对象加载成功
                this.list(0);       // 调用相应的功能
            },
            // 定义方法
            methods: {
                list: function (start) {
                    var url = this.uri + "?start=" + start;      // 整理后台控制器的路径
                    axios.get(url).then(function (response) {
                        vue.pagination = response.data;     // 将数据传入分页中
                        vue.beans = response.data.content;      // 将分页的内容转成对象实例
                    });
                },

                add: function () {
                    if(!checkEmpty(this.bean.name, "包裹名称"))
                        return;
                    if (!checkEmpty(this.bean.quantity, "包裹数量"))
                        return;
                    if (!checkEmpty(this.bean.weight, "包裹重量"))
                        return;
                    var url = this.uri;
                    axios.post(url,this.bean).then(function(response){
                        vue.list(0);
                        vue.bean =  {'id':0, 'name':'','quantity':0, 'weight': 0};
                    });
                },
                deleteBean: function (id) {
                    if (!checkDeleteLink())
                        return;
                    var url = this.uri + "/" + id;
                    axios.delete(url).then(function (response) {
                        if (0 != response.data.length)
                            alert(response.data);
                        else
                            vue.list(0);
                    });
                },

                edit: function(id) {
                    xadmin.open('包裹编辑', 'package-edit.html', id, 600, 300)
                },

                jump: function (page) {
                    jump(page, vue);        // 该页面跳转方法定义在functions.html中
                },
                jumpByNumber: function (start) {
                    jumpByNumber(start, vue);
                }
            }
        });
    });
</script>
        <div class="x-nav">
          <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
        </div>
<div class="layui-fluid" id="workingArea">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <table class="layui-table layui-form">
                        <thead>
                        <tr>
                            <th>包裹编号</th>
                            <th>包裹名称</th>
                            <th>数量</th>
                            <th>重量</th>
                            <th>操作</th>
                        </thead>
                        <tbody>
                        <template v-for="bean in beans ">
                            <tr>
                                <td>{{bean.id}}</td>
                                <td>{{bean.name}}</td>
                                <td>{{bean.quantity}}</td>
                                <td>{{bean.weight}}</td>
                                <td class="td-manage">
                                    <a @click="edit(bean.id)">编辑</a>
                                    <a @click="deleteBean(bean.id)" href="#nowhere">删除</a>
                                </td>
                            </tr>
                        </template>
                        </tbody>
                    </table>
                    <div class="pagination">
                        <ul class="pagination">
                            <li :class="{ disabled: pagination.first }" style="float: left; list-style-type:none; width: 20px; height: 20px;">
                                <a  href="#nowhere" @click="jump('first')">«</a>
                            </li>
                            <li :class="{ disabled: !pagination.hasPrevious }" style="float: left; list-style-type:none; width: 20px; height: 20px;">
                                <a  href="#nowhere" @click="jump('pre')">‹</a>
                            </li>

                            <li  v-for="i in pagination.navigatepageNums" style="float: left; list-style-type:none; width: 20px; height: 20px;">
                                <a href="#nowhere" @click="jumpByNumber(i-1)" >
                                    {{i}}
                                </a>
                            </li>

                            <li :class="{ disabled: !pagination.hasNext }" style="float: left; list-style-type:none; width: 20px; height: 20px;">
                                <a  href="#nowhere" @click="jump('next')">›</a>
                            </li>
                            <li :class="{ disabled: pagination.last }" style="float: left; list-style-type:none; width: 20px; height: 20px;">
                                <a  href="#nowhere" @click="jump('last')"> »</a>
                            </li>
                        </ul>
                    </div>
                    <div>分页跳转</div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-warning addDiv">
        <div class="panel-heading">新增包裹</div>
        <div class="panel-body">
            <table class="addTable">
                <tr>
                    <td>包裹名称</td>
                    <td><input  @keyup.enter="add" v-model.trim="bean.name" type="text" class="form-control"></td>
                </tr>
                <tr>
                    <td>包裹数量</td>
                    <td><input  @keyup.enter="add" v-model.trim="bean.quantity" type="text"
                                class="form-control"></td>
                </tr>
                <tr>
                    <td>包裹重量</td>
                    <td><input  @keyup.enter="add" v-model.trim="bean.weight" type="text"
                                class="form-control"></td>
                </tr>

                <tr class="submitTR">
                    <td colspan="2" align="center">
                        <a href="#nowhere"  @click="add" class="btn btn-success">添加</a>
                    </td>
                </tr>
            </table>

        </div>
    </div>
</div>
</body>
<script>
    //判断是否为空
    function checkEmpty(value,text){

        if(null==value || value.length==0){
            alert(text+ "不能为空");
            return false;
        }
        return true;
    }
    //确实是否要删除
    function checkDeleteLink(){
        var confirmDelete = confirm("确认要删除");
        if(confirmDelete)
            return true;
        return false;
    }
    //分页跳转函数，向前跳或者向后跳，或者跳转到第一页或者最后一页。
    function jump(page,vue){
        if('first'== page && !vue.pagination.first)
            vue.list(0);

        else if('pre'== page &&	vue.pagination.hasPrevious )
            vue.list(vue.pagination.number-1);

        else if('next'== page && vue.pagination.hasNext)
            vue.list(vue.pagination.number+1);

        else if('last'== page && !vue.pagination.last)
            vue.list(vue.pagination.totalPages-1);
    }
    //分页跳转函数，跳转到指定页
    function jumpByNumber(start,vue){
        if(start!=vue.pagination.number)
            vue.list(start);
    }
</script>
</html>